import LPopup from "@/components/public/lPopup/lPopup";
import { defineComponent, reactive, ref } from "vue";
import _ from "lodash";
import LForm, { LFormItem } from "@/components/public/lForm/lForm";
import styles from "./Add.module.less";

export default defineComponent({
  props: {
    service: {
      type: Object,
      required: true,
    },
  },
  emits: ["cancel", "confirm"],
  setup(props, { expose, emit }) {
    const addPopupRef = ref(null as any);
    const state_default = {
      form: {
        id: '',
        name: null,
        abbreviationName: null,
      },
      rules: {
        name: [{ required: true, message: "请输入名称" }],
        abbreviation_name: [{ required: true, message: "请输入简称" }],
        // license: [{ required: true, message: "请输入许可证代码" }],
        // num: [{ required: true, message: "请输入机构代码"}],
        // type:[{ required: true, message: "请选择公司类型"}],
        organ_top_id: [{ required: true, message: "请选择公司类型" }],
      },
    }

    const state: any = reactive(
      _.cloneDeep(state_default)
    );
    //取消
    const cancelHandler = () => {
      close()
    };
    //确定
    const confirmHandler = (e?: any) => {

    }
    //开启弹窗
    const open = (e: any) => {
      addPopupRef.value.open();
      console.log(e)
    }
    //关闭弹窗
    const close = () => {
      addPopupRef.value.close();
    }
    expose({
      open,
    })
    const Components = () => (
      <LPopup
        width="600px"
        title={state.form.id ? "编辑保司" : "添加保司"}
        ref={addPopupRef}
        onBeforeClose={() => {
          Object.entries(
            _.cloneDeep(state_default)
          ).forEach(item => {
            state[item[0]] = item[1];
          })
        }}
      >
        <div class={styles.addPopup}>
          <LForm
            btns={["cancel", "confirm"]}
            v-model={state.form}
            rules={state.rules}
            onCancel={() => {
              cancelHandler();
            }}
            onConfirm={(e: any) => {
              confirmHandler(e);
            }}
          >
            <LFormItem label="名称" prop="name">
              <a-input v-model:value={state.form.name} placeholder="请输入名称" />
            </LFormItem>
            <LFormItem label="简称" prop="abbreviationName">
              <a-input v-model:value={state.form.abbreviationName} placeholder="请输入简称" />
            </LFormItem>
          </LForm>
        </div>
      </LPopup>
    )
    return {
      Components,
    }
  },
  render() {
    return <this.Components />;
  },
})